<template>
    <div>
        <el-card class="box-card" style="height:auto">
            <!-- 头部区域 -->
            <template #header>
                <div class="header" style="font-size: 30px;">
                    <span>{{ homework.name }}</span>
                </div><br>
                <span style="color: gray;">任务类型:&nbsp;{{ homework.type }}</span><br><br>
                <span style="color: gray;">时间:&nbsp;{{ homework.stime }}--{{ homework.etime }}</span><br>
            </template>
            <div>
                <span>作业内容:&nbsp;{{ homework.content }}</span><br>
            </div>

            <div>
                <el-form :model="subwork" :label-position="labelPosition" label-width="100px" label="回复作业：">
                    <el-form-item style="margin-top: 30px;" label="回复作业：">
                    </el-form-item>

                    <el-form-item style="margin-top: 30px;" label="文本：">
                        <el-input type="textarea" v-model="subwork.content"></el-input>
                    </el-form-item>

                    <el-form-item style="margin-top: 30px;" label="图片：">
                        <el-upload action="http://localhost:8080/avatar/upload" list-type="picture-card"
                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleSuccess"
                            :file-list="ImagefileList" multiple>
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl">
                        </el-dialog>
                    </el-form-item>

                    <el-form-item style="margin-top: 30px;" label="文档：">
                        <el-upload class="upload-demo" action="http://localhost:8080/avatar/upload"
                            :on-preview="handlePreview" :on-remove="docRemove" multiple :before-remove="beforeRemove"
                            :on-success="handledocSuccess" :file-list="DocumentfileList">
                            <el-button size="small" type="primary">点击上传</el-button>

                            <div slot="tip" class="el-upload__tip">只能上传文档，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" style="margin-top: 50px;" @click="OnSubmit">提交作业</el-button>
                    </el-form-item>
                </el-form>

            </div>

        </el-card>
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            labelPosition: 'right',
            ImagefileList: [], // 存储已上传和待上传的图片信息
            DocumentfileList: [],
            dialogImageUrl: '', // 预览图片的地址
            dialogVisible: false, // 控制预览图片对话框的显示与隐藏
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            //作业数据模型
            homework: {
                homeworkid: '',
                name: '',
                type: '',
                content: '',
                stime: '',
                etime: ''
            },
            //提交作业数据模型
            subwork: {
                stuid: '',
                homeworkid: this.$route.query.homeworkId,
                content: '',
                subtime: '',
                status: '未批改',
                grade: '',
                feedbcak: '',
                attachment: [],
                image: []
            },
        }
    },

    methods: {
        // //查询是否上传作业
        // workSearch() {
        //     request.get("/subwork/findByid", {
        //         params: {
        //             homeworkId: this.$route.query.homeworkId,
        //             stuId: localStorage.getItem("stuid")
        //         }
        //     }).then(res => {
        //         if (res.data.data == null) {
        //             this.$message.error("还未上交作业!!!")
        //         } else {
        //             this.subwork = res.data.data
        //             // this.$message.error("获取失败")
        //         }
        //     }).catch(error=>{
        //         console.log(new error("服务异常"))
        //         this.$message.error("服务异常")
        //     })
        // },

        //作业上传
        OnSubmit() {
            request.post("/subwork/add", this.subwork).then(res => {
                if (res.data.code == '0') {
                    this.$message.success("提交成功")
                    this.subwork = res.data.data
                } else {
                    this.$message.error("提交失败")
                }
            })
        },
        //文档的上传处理---------------------------------------------------------------------
        docRemove(file, DocumentfileList) {
            console.log(file, DocumentfileList);
            this.DocumentfileList = DocumentfileList
            this.subwork.attachment.pop(file)
            console.log(this.DocumentfileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handledocSuccess(res, file,DocumentfileList) {
            console.log(res.data)
            console.log(DocumentfileList)
            console.log(file);
            this.DocumentfileList=DocumentfileList
            this.subwork.attachment.push(res.data)
            console.log(this.DocumentfileList)
            console.log(this.subwork.attachment)
        },
        beforeRemove(file,fileList) {
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}?`);
        },
        //图片的上传处理---------------------------------------------------------------------
        // 图片预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 删除图片
        handleRemove(file, ImagefileList) {
            // 这里可以根据需要调用后端接口删除服务器上的文件
            // 然后从 fileList 中移除对应的文件信息
            this.ImagefileList =ImagefileList;
            this.subwork.image.pop(file)
            console.log("移除文件列表时的钩子", file);
            console.log(this.subwork.image);
            console.log(this.ImagefileList);
        },

        // 上传成功后的回调
        handleSuccess(response, file, ImagefileList) {
            this.ImagefileList = ImagefileList
            console.log("添加到上传列表时的钩子", file)
             console.log(this.ImagefileList)
            this.subwork.image.push(response.data)
            console.log(this.subwork.image)
        },

        //用户id查找相关学生信息
        getStudent() {
            request.get("/stu/findstu", {
                params: {
                    id: this.user.data.userid
                }
            }).then(res => {
                if (res.data.code == '0') {
                    console.log(res.data.data)
                    this.subwork.stuid = res.data.data.stuid
                    this.Id = res.data.data.stuid
                    console.log(this.Id)
                } else {
                    this.$message.error("获取失败")
                }
            })
        },
        //Id查找作业信息
        getHomework() {
            request.get("/homework/getByid", {
                params: {
                    id: this.$route.query.homeworkId
                }
            }).then(res => {
                if (res.data.code == '0') {
                    console.log(res.data.data)
                    this.homework = res.data.data
                } else {
                    this.$message.error("获取失败")
                }
            }).catch(error => {
                console.log(new error("服务异常"))
                this.$message.error("服务异常")
            })
        }
    },

    created() {
        this.getHomework()
        this.getStudent()
        // this.workSearch()
        console.log(this.homework)
        console.log(this.subwork)
        console.log(this.subwork.content)
    }

}
</script>

<style></style>